<template>
    <!-- offer发放页面 -->
    <div class="offer-management-container">
        <!-- 操作栏 -->
        <div class="toolbar">
            <div class="toolbar-left">
                <el-button type="primary" plain @click="add">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    Offer发放
                </el-button>
            </div>

            <div class="toolbar-right">
                <el-input class="search-input" v-model="searchKeyword" placeholder="搜索姓名或部门" @keyup.enter="handleSearch"
                    clearable>
                    <template #prefix>
                        <el-icon>
                            <Search />
                        </el-icon>
                    </template>
                </el-input>

                <el-dropdown @command="handleFilterCommand">
                    <el-button>
                        筛选<el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="item in FilterData" :key="item.value" :command="item.value"
                                :class="{ active: Screening === item.value }">
                                {{ item.label }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

                <el-button @click="Sorting">
                    {{ toggleSort === 1 ? '升序' : '降序' }}
                    <el-icon>
                        <Sort />
                    </el-icon>
                </el-button>

                <el-button @click="Reset">
                    <el-icon>
                        <Refresh />
                    </el-icon>
                    重置
                </el-button>
            </div>
        </div>

        <!-- 数据表格 -->
        <div class="content-wrapper">
            <div class="table-container">
                <!-- 待发offer的表格 -->
                <el-table :data="page.records" class="offer-table" v-if="Screening === '待发offer'"
                    @row-click="handleRowClick" v-loading="loadingTable">
                    <el-table-column prop="candidateid" label="简历编号" sortable width="120" align="center">
                        <template #default="scope">
                            <span class="link-text">{{ scope.row.candidateid }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="resumeStatus" label="Offer状态" width="120" align="center">
                        <template #default="scope">
                            <el-tag type="warning">{{ scope.row?.resumeStatus }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="resumeRequirements" label="需求编号" width="120" align="center" />

                    <el-table-column prop="candidatename" label="姓名" width="120" align="center">
                        <template #default="scope">
                            <span class="link-text">{{ scope.row?.candidatename }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="intendedPosition" label="部门" width="120" align="center">
                        <template #default="scope">
                            <el-tag>{{ scope.row?.intendedPosition }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="intendedPosition" label="Offer岗位" width="120" align="center">
                        <template #default="scope">
                            <el-tag type="success">{{ scope.row?.department?.deptName }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="cellPhone" label="手机号" width="120" align="center" />
                    <el-table-column prop="mailbox" label="邮箱" width="180" align="center" />
                    <el-table-column prop="school" label="毕业学校" width="150" align="center" />
                    <el-table-column prop="specialized" label="专业" width="150" align="center" />
                    <el-table-column prop="filterDate" label="提交日期" width="150" align="center" />
                    <el-table-column label="操作" width="120" align="center" fixed="right">
                        <template #default="scope">
                            <el-button size="small" type="primary" @click.stop="handleDetail(scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 已发offer的表格 -->
                <el-table :data="page.records" class="offer-table" v-else-if="Screening === '待入职'"
                    @row-click="handleRowClick" v-loading="loadingTable">
                    <el-table-column prop="offerStatus" label="Offer状态" width="120" align="center">
                        <template #default="scope">
                            <el-tag type="primary">已发Offer</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="candidateresume.resumeRequirements" label="需求编号" width="120"
                        align="center" />
                    <el-table-column prop="candidateresume.candidateid" label="简历编号" width="120" align="center">
                        <template #default="scope">
                            <span class="link-text">{{ scope.row.candidateresume?.candidateid }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="candidateresume.candidatename" label="姓名" width="120" align="center">
                        <template #default="scope">
                            <span class="link-text">{{ scope.row.candidateresume?.candidatename }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="candidateresume.intendedPosition" label="Offer岗位" width="120" align="center">
                        <template #default="scope">
                            <el-tag type="success">{{ scope.row.candidateresume?.intendedPosition }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="department.deptName" label="入职部门" width="120" align="center">
                        <template #default="scope">
                            <el-tag>{{ scope.row.department?.deptName }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="candidateresume.cellPhone" label="手机号" width="120" align="center" />
                    <el-table-column prop="candidateresume.mailbox" label="邮箱" width="180" align="center" />
                    <el-table-column prop="probationPeriod" label="试用期" width="100" align="center" />
                    <el-table-column prop="probationarySalary" label="试用期薪资" width="120" align="center" />
                    <el-table-column prop="salary" label="转正薪资" width="120" align="center" />
                    <el-table-column prop="reportedDate" label="报道日期" sortable width="120" align="center" />
                    <el-table-column prop="candidateresume.screenpeople" label="提交人" width="120" align="center">
                        <template #default="scope">
                            <span class="link-text">{{ scope.row.candidateresume?.screenpeople }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="submit" label="提交时间" sortable width="120" align="center" />

                    <el-table-column label="操作" width="120" align="center" fixed="right">
                        <template #default="scope">
                            <el-button size="small" type="primary" @click.stop="handleDetail(scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 全部数据的表格 -->
                <el-table :data="page.records" class="offer-table" v-else @row-click="handleRowClick"
                    v-loading="loadingTable">
                    <el-table-column prop="candidateresume.screenpeople" label="招聘负责人" width="120" align="center">
                        <template #default="scope">
                            <span class="link-text">{{ scope.row.candidateresume?.screenpeople }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="distributionTime" label="发放日期" sortable width="120" align="center" />

                    <el-table-column prop="offerStatus" label="Offer状态" width="120" align="center">
                        <template #default="scope">
                            <el-tag v-if="scope.row.offerStatus === '待发offer'" type="warning">
                                {{ scope.row.offerStatus }}
                            </el-tag>
                            <el-tag v-else type="primary">已发Offer</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="candidateresume.resumeRequirements" label="需求编号" width="120"
                        align="center" />
                    <el-table-column prop="candidateresume.candidateid" label="简历编号" width="120" align="center">
                        <template #default="scope">
                            <span class="link-text">{{ scope.row.candidateresume?.candidateid }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="candidateresume.candidatename" label="姓名" width="120" align="center">
                        <template #default="scope">
                            <span class="link-text">{{ scope.row.candidateresume?.candidatename }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="candidateresume.intendedPosition" label="Offer岗位" width="120" align="center">
                        <template #default="scope">
                            <el-tag type="success">{{ scope.row.candidateresume?.intendedPosition }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="department.deptName" label="入职部门" width="120" align="center">
                        <template #default="scope">
                            <el-tag>{{ scope.row.department?.deptName }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="candidateresume.cellPhone" label="手机号" width="120" align="center" />
                    <el-table-column prop="candidateresume.mailbox" label="邮箱" width="180" align="center" />
                    <el-table-column prop="probationPeriod" label="试用期" width="100" align="center" />
                    <el-table-column prop="probationarySalary" label="试用期薪资" width="120" align="center" />
                    <el-table-column prop="salary" label="转正薪资" width="120" align="center" />
                    <el-table-column prop="reportedDate" label="报道日期" sortable width="120" align="center" />
                    <el-table-column prop="candidateresume.screenpeople" label="提交人" width="120" align="center">
                        <template #default="scope">
                            <span class="link-text">{{ scope.row.candidateresume?.screenpeople }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="submit" label="提交时间" sortable width="120" align="center" />

                    <el-table-column label="操作" width="120" align="center" fixed="right">
                        <template #default="scope">
                            <el-button size="small" type="primary" @click.stop="handleDetail(scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
                v-model:current-page="page.current" v-model:page-size="page.size" :page-sizes="[10, 20, 30, 40]"
                layout="total, sizes, prev, pager, next, jumper" :total="page.total" background>
            </el-pagination>
        </div>
    </div>

    <!-- 详情页面 -->
    <el-dialog :title="`Offer详情 - ${dataNumber}`" v-model="isVisible" fullscreen lock-scroll="true" destroy-on-close>
        <Details :data="dataNumber"></Details>
    </el-dialog>

    <!-- 添加页面 -->
    <el-dialog title="Offer发放" v-model="AddDisplay" fullscreen destroy-on-close>
        <Insert @refresh="Initiate"></Insert>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import request from '@/api/request'
import Details from '@/views/recruitment/OfferManagement/Details.vue'
import Insert from '@/views/recruitment/OfferManagement/insert.vue'
import { Plus, Search, ArrowDown, Sort, Refresh } from '@element-plus/icons-vue'

// 响应式数据
const isVisible = ref(false) // 详情显示
const AddDisplay = ref(false) // 添加显示
const loadingTable = ref(false) // 表格加载状态
const searchKeyword = ref('') // 搜索关键字
const toggleSort = ref(1) // 排序状态
const Screening = ref('待发offer') // 筛选状态

// 分页数据
const page = ref({
    current: 1, // 当前页
    size: 10, // 每页条数
    total: 0, // 总条数
    records: [] // 数据
})

// 筛选数据
const FilterData = ref([
    { value: '待入职', label: '已发放Offer' },
    { value: '待发offer', label: '待发Offer' },
])

// 搜索处理
const handleSearch = () => {
    page.value.current = 1
    if (Screening.value === "待发offer") {
        ObtainData()
    } else if (Screening.value === "待入职") {
        loadingTable.value = true
        request({
            url: '/offermanagementtable/findByOffStatus',
            method: 'get',
            params: {
                pageNum: page.value.current,
                pageSize: page.value.size,
                status: Screening.value || '',
                intendedPosition: searchKeyword.value,
                deptName: searchKeyword.value
            }
        }).then(res => {
            if (res.data.records) {
                page.value = res.data
            } else {
                page.value = {
                    current: 1,
                    size: res.data.length,
                    total: res.data.length,
                    records: res.data
                }
            }
            loadingTable.value = false
        }).catch(() => {
            loadingTable.value = false
        })
    }

}

// 获取数据
const ObtainData = () => {
    loadingTable.value = true
    request({
        url: '/candidateresume/searchCandidateResumesByStatusAndNameOrPost',
        method: 'get',
        params: {
            pageNum: page.value.current,
            pageSize: page.value.size,
            status: Screening.value || '',
            candidateName: searchKeyword.value,
            postsName: searchKeyword.value
        }
    }).then(res => {
        console.log(res.data);
        if (res.data.records) {
            page.value = res.data


        } else {
            page.value = {
                current: 1,
                size: res.data.length,
                total: res.data.length,
                records: res.data
            }
        }
        loadingTable.value = false
    }).catch(() => {
        loadingTable.value = false
    })
}

// 排序处理
const Sorting = () => {
    if (Screening.value === '待入职') {
        toggleSort.value = toggleSort.value === 1 ? 2 : 1
        let url = toggleSort.value === 1
            ? '/offermanagementtable/sortByTime'
            : '/offermanagementtable/sortByTimeDesc'

        loadingTable.value = true
        request({
            url,
            method: 'get',
            params: {
                pageNum: page.value.current,
                pageSize: page.value.size,
                status: Screening.value || '',
                intendedPosition: searchKeyword.value,
                deptName: searchKeyword.value
            }
        }).then(res => {
            if (res.data.records) {
                page.value = res.data
            } else {
                page.value = {
                    current: 1,
                    size: res.data.length,
                    total: res.data.length,
                    records: res.data
                }
            }
            loadingTable.value = false
        }).catch(() => {
            loadingTable.value = false
        })
    } else if (Screening.value === '待发offer') {
        toggleSort.value = toggleSort.value === 1 ? 2 : 1
        loadingTable.value = true
        let url = toggleSort.value === 1
            ? '/candidateresume/searchCandidateResumesByStatusAndNameOrPostASC'
            : '/candidateresume/searchCandidateResumesByStatusAndNameOrPostDESC'
        request({
            url,
            method: 'get',
            params: {
                pageNum: page.value.current,
                pageSize: page.value.size,
                status: Screening.value || '',
                candidateName: searchKeyword.value,
                postsName: searchKeyword.value
            }
        }).then(res => {
            console.log(res.data);
            if (res.data.records) {
                page.value = res.data


            } else {
                page.value = {
                    current: 1,
                    size: res.data.length,
                    total: res.data.length,
                    records: res.data
                }
            }
            loadingTable.value = false
        }).catch(() => {
            loadingTable.value = false
        })
    }
}

// 重置处理
const Reset = () => {
    Screening.value = '待发offer'
    searchKeyword.value = ''
    page.value.current = 1
    handleFilterCommand('待发offer')
}

// 筛选命令处理
const handleFilterCommand = (command) => {
    Screening.value = command
    page.value.current = 1
    if (Screening.value === '待入职') {
        loadingTable.value = true
        request({
            url: '/offermanagementtable/findByOffStatus',
            method: 'get',
            params: {
                pageNum: page.value.current,
                pageSize: page.value.size,
                status: Screening.value || '',
                intendedPosition: searchKeyword.value,
                deptName: searchKeyword.value
            }
        }).then(res => {
            if (res.data.records) {
                page.value = res.data
            } else {
                page.value = {
                    current: 1,
                    size: res.data.length,
                    total: res.data.length,
                    records: res.data
                }
            }
            loadingTable.value = false
        }).catch(() => {
            loadingTable.value = false
        })
    } else if (Screening.value === '待发offer') {
        ObtainData()
    } else {
        ObtainData()
    }
}

// 分页处理
const handleCurrentChange = (val) => {
    page.value.current = val
    ObtainData()
}

const handleSizeChange = (val) => {
    page.value.size = val
    page.value.current = 1
    ObtainData()
}

// 行点击处理
const handleRowClick = (row) => {
    handleDetail(row)
}

// 详情处理
const dataNumber = ref(null)
const handleDetail = (row) => {
    dataNumber.value = row.applicantId || row.candidateid;
    console.log("传输数据",dataNumber.value);
    
    isVisible.value = true
}

// 添加处理
const Initiate = () => {
    AddDisplay.value = false
    page.value.current = 1
    ObtainData()
}

const add = () => {
    AddDisplay.value = true
}

// 初始化数据
onMounted(() => {
    ObtainData()
})
</script>

<style scoped>
.offer-management-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.toolbar-left {
    flex: 1;
}

.toolbar-right {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

.search-input {
    width: 250px;
}

.content-wrapper {
    flex: 1;
    overflow: auto;
    margin-bottom: 20px;
}

.table-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.offer-table {
    width: 100%;
}

.pagination-container {
    display: flex;
    justify-content: flex-end;
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-top: auto;
    flex-shrink: 0;
}

.link-text {
    color: #409eff;
    cursor: pointer;
}

.link-text:hover {
    color: #66b1ff;
}

.active {
    color: #409eff;
    font-weight: bold;
}
</style>